<template>
    <view class="cn-component-form" style="position: relative;">
        <nFormItem :title="title" :placeholder="placeholder" :data.sync="data" :field="field" :class_input="class_input"
            :disabled="disabled" :is_must="is_must" :changeInput="changeInput">
        </nFormItem>
        <view v-if="address_list.length > 0" class="width-100p margin-bottom-120" style="border-top: 1rpx solid #eee; position: absolute; z-index: 1;">
            <view class="margin-lr-20 bg-white" style="border: 2rpx solid #ddd; border-top: 0; position: relative;">
                <view @tap="clearAddressList" class="round text-white flex align-center justify-center text-20" style="width: 56rpx; height: 56rpx; background-color: rgba(0,0,0,.2); position: absolute; right: 16rpx; top:16rpx;">
                    <text class="cuIcon-close"></text>
                </view>
                <view @tap="setDataField(info)" v-for="(info, key) in address_list" :key="key" class="flex align-center padding-lr-20 padding-tb-20">
                    <view class="text-gray text-lg">
                        <text class="cuIcon-locationfill"></text>
                    </view>
                    <view class="width-100p margin-left-10">
                        <view class="flex justify-between">
                            <view class="text-nddyny text-15">{{info.title}}</view>
                            <view v-if="info._distance" class="text-gray text-13 flex-s0">{{info._distance | m2km}}</view>
                        </view>
                        <view class="text-gray margin-top-4">
                            {{info.address}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['title', 'placeholder', 'data', 'field', 'class_input', 'disabled', 'is_must', 'location', 'callback'],
        data() {
            return {
                address_list: []
            }
        },
        methods: {
            changeInput(e) {
                this.data.form.keyword = e.target.value;
                this.$emit('update:data', this.data);
                this.$map.keyword2AddressNames(this, this.data.form.keyword, this.location, (address_list) => {
                    this.address_list = address_list || [];
                })
            },
            setDataField(info) {
                this.data.form.keyword = info.title;
                this.$emit('update:data', this.data);
                this.clearAddressList();
                this.callback({
                    area_lat: info.location.lat,
                    area_lng: info.location.lng,
                    address_name: info.title,
                    area_code: info.adcode
                });
            },
            clearAddressList() {
                this.address_list = [];
            }
        }
    }
</script>
